<template lang="html">
  <div class="lrcContainer">
  	<div class="lrc" ref="lrc">
       <!-- <p  v-if="keyArr[index] <= currentTime && keyArr[index+1]>currentTime" v-for="(item,key,index) in musiclrcData" :key="index">
       	{{item}}
       </p> -->
       <p class="lrc-p" :class="{active:keyArr[index] <= currentTime && keyArr[index+1]>currentTime}" v-for="(item,key,index) in musiclrcData" :key="index">
       	{{item}}{{getScroller(key,index)}}
       </p>
    </div>
  </div>
</template>

<script>
export default {
	name:"lrc",
	data(){
		return{
           musiclrcData:{},
           keyArr:[]
		}
	},
	props:{
		musicid:{
			type:[String,Number],
			default:''
		},
		currentTime:{
			type:[String,Number],
			default:0
		},
		durationTime:{
			type:[String,Number],
			default:0
		}

	},
	methods:{
        getAllKey(){
            for(var i in this.musiclrcData){
            	this.keyArr.push(i)
            }
        },
        getScroller(key,index){
            if(this.keyArr[index] <= this.currentTime && this.keyArr[index+1]>this.currentTime){
            	this.$refs.lrc.style.top=-(index-2)*30+"px"
            }
        }
	},
	mounted(){
		this.$axios.get(this.HOST+"/v1/restserver/ting",{
			params:{
				method:"baidu.ting.song.lry",
				songid:this.musicid

			}
		}).then(res=>{
           // 数据拆分
            var lyrics=res.data.lrcContent.split("\n")
            var lrcObj={};
            for(var i = 0 ;i<lyrics.length;i++){
            	var lyric = decodeURIComponent(lyrics[i]);
            	console.log(lyric);          //  [01:28.45]借我一首歌 
            	var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            	var timeRegExpArr=lyric.match(timeReg);
            	console.log(timeRegExpArr)   //  ["[01:28.45]"]
            	if(!timeRegExpArr)continue;
                var claus=lyric.replace(timeReg,''); 
                console.log(claus)           // 借我一首歌
                for(var k=0,h=timeRegExpArr.length;k<h;k++){
                     var t = timeRegExpArr[k];
                     var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                         sec = Number(String(t.match(/\:\d*/i)).slice(1));
                     var time=min*60+sec;
                     lrcObj[time]=claus;
                }
            }
            this.musiclrcData=lrcObj;
            this.getAllKey();
           
		}).catch(error=>{
			console.log(error)
		})
	}
}
</script>

<style lang="css" scoped>
.lrcContainer{
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.lrc{
  width: 100%;
  position: absolute;
  top: 0;
}
.active{
  color: red !important;
}
.lrc-p{
  height: 30px;
  line-height: 30px;
}

.up30{
	margin-top: -30px;
}

</style>
